<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="跨城费"> </mh-header>
      <article class="city-cross">
        <div class="open-city mh-pd">
          <span class="label">已开通城市：</span>
          <span class="">无</span>
        </div>
        <div class="city-content" v-for="(item, index) in citysList" :key="'city'+index">
          <ul>
            <li class="letter mh-pd">{{item.letter}}</li>
            <li class="city-item mh-pd" v-for="(city, index) in item.citys" :key="index">
              <a href="javascript:" v-text="city.name"></a>
            </li>
          </ul>
        </div>
      </article>
      <div class="foot-btn">开通</div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  export default {
    name: "cross-fee",
    data () {
      return {
        openedCity: [],
        citysList: [
          {
            letter: 'A',
            citys: [
              {
                cityCode: '10000',
                name: '阿拉善盟'
              },
              {
                cityCode: '10001',
                name: '鞍山'
              },
              {
                cityCode: '10001',
                name: '鞍山'
              },
              {
                cityCode: '10001',
                name: '鞍山'
              },
              {
                cityCode: '10001',
                name: '鞍山'
              }
            ]
          }
        ]
      }
    },
    components: {
      MhHeader
    }
  }
</script>

<style lang="scss" scoped>
  .city-cross {
     background-color: #fff;
  }
  .letter {
    background-color: #f7f7f7;
  }
  .city-item {
    border-bottom: 1px solid #eee;
  }
  .foot-btn {
    position: fixed;
    width: 100%;
    padding: 1.8rem 0;
    left: 0;
    bottom: 0;
    color: #fff;
    font-size: 1.7rem;
    text-align: center;
    background-color: #e685aa;
  }
</style>
